<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--遍历数组-->
    <h2>人员列表</h2>
    <ul>
        <!--        <li v-for="p in people" :key="p.id">{{p.name}}：{{p.age}}岁</li>-->
        <!--        <li v-for="(p, index) of people" :key="index">{{p.name}}：{{p.age}}岁</li>-->
        <li v-for="p in people" :key="p.id">{{p.name}}：{{p.age}}岁</li>
    </ul>
    <!--遍历对象属性-->
    <h2>汽车信息</h2>
    <ul>
        <li v-for="(car, index) in cars" :key="index">{{index}}: {{car}}</li>
    </ul>
    <!--遍历字符串-->
    <h2>遍历字符串</h2>
    <ul>
        <li v-for="(c, index) in str" :key="index">{{c}}: {{index}}</li>
    </ul>
    <!--遍历指定次数-->
    <h2>遍历指定次数</h2>
    <ul>
        <li v-for="(n, index) in 5" :key="index">{{index}}: {{n}}</li>
    </ul>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data() {
            return {
                people: [
                    {id: '001', name: '张三', age: 18},
                    {id: '002', name: '李四', age: 19},
                    {id: '003', name: '王五', age: 20},
                ],
                cars: {
                    id: '001',
                    name: '奥迪',
                    price: '70万',
                    color: '黑色'
                },
                str: 'hello'
            }
        },
        computed: {},
        methods: {},
        watch: {}
    });
</script>
</html>